<template>
	<view v-if="specs.length>0" >
		<view class="popup-mask" @click="mask"></view>
		<view class="main">
			<view class="title">
				<view class="title_item" v-for="(item, index) in specs" :key="index">
					<view class="">{{ item.specsCategorizeName }}</view>
				</view>
			</view>

			<view class="picker-container">
				<picker-view indicator-style="height: 80rpx;" :value="value" @change="bindChange" class="custom-picker" >
			
					<picker-view-column v-for="(category, categoryIndex) in specs" :key="category.id || categoryIndex" class="picker-column">
						<view   class="picker-item" v-for="(item, itemIndex) in category.specsCategorizeItem" :key="item.id || itemIndex">
							{{ item.name }}
						</view>
					</picker-view-column>
				</picker-view>

				<view class="selected-value" v-if="selectedValues.length">已选择: {{ selectedValues.join(' / ') }}</view>
			</view>

			<view class="btn" @click="sure"> 确 认</view>
		</view>
	</view>
</template>

<script>
const db = uniCloud.database();
const _ = db.command;
export default {
	name: 'selectSpecs',
	props:{
		specs:{
			type:Array,
			default:()=>[]
		}
	},

	computed: {
	
		// 计算属性，返回当前选中的具体值
		selectedValues() {
			return this.value
				.map((index, categoryIndex) => {
					const category = this.specs[categoryIndex];
					if (category && category.specsCategorizeItem && category.specsCategorizeItem[index]) {
						return category.specsCategorizeItem[index].name;
					}
					return '';
				})
				.filter(Boolean);
		}
	},
	watch:{
		specs:{
			handler(newval){
				if(newval){
					 this.value = (this.specs || []).map(() => 0);
				}
				
			}
		}
	},
	data() {
		return {
		
			value: []
		};
	},

	methods: {
	
		bindChange(event) {
			
			this.value=event.detail.value
			console.log('5555',JSON.stringify(this.value));
	      
		},
		
		mask() {
		   	this.$emit('close');
		},
		sure() {	
		
			let specStr = this.selectedValues.join('/');
			this.$emit('sureSpce', {specStr:specStr,specIndex:this.value});
			this.mask();
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	position: absolute;
	display: flex;
	flex-direction: column;
	min-width: 400rpx;
	background-color: #ccc;
	bottom: -200rpx;
	padding: 5rpx 5rpx;
	left: 0;
	z-index: 99; /* 确保层级足够高 */
	border-radius: 8rpx;
}

.popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background-color: rgba(0, 0, 0, 0.5);
}
.title {
	display: flex;
	width: 100%;
	height: 70rpx;
	align-items: center;
	justify-content: space-evenly;
	font-size: 32rpx;
	font-weight: 600;
	.title_item {
		display: flex;
		background-color: #e2e2e2;
		align-items: center;
		justify-content: center;
		flex: 1;
		margin: 2rpx;
		height: 100%;
	}
}

.picker-container {
	width: 100%;
}
.custom-picker {
	height: 250rpx;
}
.picker-column-wrapper {
	display: flex;
}

.picker-item {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 32rpx;
	color: #ffffff;
	background-color: #333;
	margin-right: 20rpx;
}

.selected-value {
	margin-top: 20rpx;
	text-align: center;
	font-size: 16px;
	color: #007aff;
	
}
.btn{
	width: 100%;
	display: flex;
	align-items: center;
	height: 70rpx;
	background-color: #007aff;
	color: white;
	margin-top: 20rpx;
    justify-content: center;
	border-radius: 5rpx;
	:active{
		background-color: #13d4ff;
	}
}
</style>
